
<template>
           <h2 style="text-align: center;">理财项目列表</h2>
           理财编号:<input type="text" v-model="LoadInfo.Fid"/>
           理财名称:<input type="text" v-model="LoadInfo.Fname"/>
           理财收益:<input type="text" v-model="LoadInfo.MinFAPY"/> - <input type="text" v-model="LoadInfo.MaxFAPY"/>
           <input type="button" value="查询" @click="LoadData"/>
           <table class="table table-bordered">
            <thead>
                <tr>
                   <td>理财编号</td>
                   <td>理财名称</td>
                   <td>年收益</td>
                   <td>月收益</td>
                   <td>最低金额</td>
                   <td>理财人数</td>
                   <td>风险等级</td>  
                   <td>操作</td>
               </tr>
            </thead>
               <tbody>
                <tr v-for="item in info">
                   <td>{{item.F_id}}</td>
                   <td>{{item.F_name}}</td>
                   <td>{{item.F_APY}}</td>
                   <td>{{(item.F_APY/12).toFixed(2)}}%</td>
                   <td>{{item.F_MinMoney.toFixed(2)}}CNY</td>
                   <td>{{item.F_Number}}</td>
                   <td>{{item.F_Level==0?"低风险":item.F_Level==1?"中风险":"高风险"}}</td>
                   <td><a href="#" @click="DeleteData(item.F_id)">删除</a> <a v-if="item.F_Number==0" href="#" @click="JumpToUpdate(item.F_id)">修改</a></td>
               </tr>
               </tbody>
           </table>
           <span>当前数据共{{recordCount}}条,每页显示{{LoadInfo.PageSize}}条,当前{{ LoadInfo.PageIndex }}/{{PageCount}}页</span>
           &nbsp;<a @click="LoadPage('F')">首页</a>
           &nbsp;<a @click="LoadPage('P')">上一页</a>
           &nbsp;<a v-for="item in PageCount" @click="LoadPageNum(item)">{{item}}&nbsp;</a>
           &nbsp;<a @click="LoadPage('N')">下一页</a>
           &nbsp;<a @click="LoadPage('L')">尾页</a>
           &nbsp;<input type="text" v-model="JumpPage" style="width: 50px; height: 30px;"/> <input type="button" value="Go" @click="JumpPageGo"/>
           &nbsp;
           <select v-model="Csize" @change="ChangeSize">
                <option value="2">每页显示2条</option>
                <option value="3">每页显示3条</option>
                <option value="4">每页显示4条</option>
           </select>

</template>


<script setup lang="ts">
import {ref,onMounted} from 'vue';

import axios from 'axios';


import {useRouter} from 'vue-router';

//获取当前路由的实例
const router = useRouter();

//创建响应式数据
const info = ref([{
    F_id:0,
    F_name:"",
    F_APY:0,
    F_MinMoney:0,
    F_Number:0,
    F_Level:0
}])

//创建生命周期函数勾
onMounted(()=>{
    LoadData();
})

//创建查询条件响应式数据
const LoadInfo = ref({
    Fid:"",
    Fname:"",
    MinFAPY:"",
    MaxFAPY:"",
    PageSize:2,
    PageIndex:1
})

//创建总条数,总页数响应式数据
const PageCount = ref(0);
const recordCount = ref(0);

const LoadData =()=>{
     axios({
        url:"https://localhost:44337/api/Finans/ShowFinanInfo",
        method:"get",
        params:LoadInfo.value
     }).then((res)=>{
        console.log(res.data);
        info.value = res.data.list;
        PageCount.value=res.data.PageCount
        recordCount.value=res.data.recordCount;
     })
     .catch((err)=>{
        console.log(err);
     })
}

//完成基本分页
const LoadPage =(Msg:string) =>{
    switch(Msg){
        case "F":
            LoadInfo.value.PageIndex=1;
            break;
        case "P":
            if(LoadInfo.value.PageIndex>1)
            {
                LoadInfo.value.PageIndex--;
            }
            else
            {
                alert('已经是第一页了')
            }
            break;
        case "N":
            if(LoadInfo.value.PageIndex<PageCount.value)
            {
                LoadInfo.value.PageIndex++;
            }
            else
            {
                alert('已经是最后一页了')
            }
            break;
        case "L":
            LoadInfo.value.PageIndex=PageCount.value;
            break;
       default:
            break;
    }
    LoadData();
}

//完成页码的点击事件加载
const LoadPageNum =(PageNum:number) =>{
      LoadInfo.value.PageIndex =PageNum;
      LoadData();
}

//创建跳转页的响应式数据
const JumpPage =ref("")

//完成跳转页
const JumpPageGo = ()=>{
      if(JumpPage.value =="")
      {
        alert('请输入页码')
        return;
      }
      if(isNaN(Number(JumpPage.value)))
      {
         alert('请输入数字页码')
         JumpPage.value="";
         return;
      }
      if(Number(JumpPage.value)<=0)
      {
        alert('跳转页码不能小于1')
        JumpPage.value="";
        return;
      }
      if(Number(JumpPage.value)>PageCount.value)
      {
        alert('跳转页码不能超过最大页码')
        JumpPage.value="";
        return;
      }
      LoadInfo.value.PageIndex = parseInt(JumpPage.value);
      LoadData();
}

//创建每页显示条数的响应式数据
const Csize =ref(2);

//每页显示条数
const ChangeSize =()=>{
    LoadInfo.value.PageSize = Csize.value;
    LoadData();
}

//删除功能
const DeleteData=(Fid:number)=>{
    if(confirm('确认是否删除?'))
    {
        axios({
        url:"https://localhost:44337/api/Finans/DeleteFinanInfo",
        method:"delete",
        params:{
            Fid:Fid
        }
    }).then(res=>{
        if(res.data>0)
        {
            alert('删除成功');
            LoadData();
        }
        else if(res.data==-1)
        {
            alert('无法删除,已有人理财!');
        } else
        {
            alert('删除失败')
        }
    }).catch(err=>{
        console.log(err);
    })
 }
}

//跳转修改页面
const JumpToUpdate=(Fid:number)=>{

      router.push({
         name:"UpdateFinanInfo",
         params:{
             Fid:Fid
         }
      })
}




</script>